<template>
    <div class="pe-card" :class="[bodyClass, getClass()]" :style="bodyStyle">
        <div v-if="useSlots().header || header" class="pe-card-header">
            <slot name="header">
                {{ header }}
            </slot>
        </div>
        <div class="pe-card-content">
            <slot></slot>
        </div>
        <div v-if="useSlots().footer || footer" class="pe-card-footer">
            <slot name="footer">
                {{ footer }}
            </slot>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useSlots } from 'vue';


/**
 * @param header 卡片的标题 你既可以通过设置 header 来修改标题，也可以通过 slot#header 传入 DOM 节点
 * @param footer 卡片页脚。 你既可以通过设置 footer 来修改卡片底部内容，也可以通过 slot#footer 传入 DOM 节点
 * @param body-style body 的 CSS 样式
 * @param body-class body 的自定义类名
 * @param shadow 卡片阴影显示时机
 */
interface Props {
    header?: string,
    footer?: string,
    bodyStyle?: any,
    bodyClass?: string,
    shadow?: 'always' | 'never' | 'hover'
}

const props = withDefaults(defineProps<Props>(), {
    shadow: "always"
})

const getClass = () => {
    if(props.shadow === "always") {
        return "pe-card-always"
    } else if(props.shadow === "hover") {
        return "pe-card-hover"
    }
    return ""
}
</script>

<script lang="ts">
export default {
    name: "pe-card"
}
</script>
